<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>{% block title %}首页 - 小白导航{% endblock %}</title>
    <link rel="icon" href="{{ url_for('static', filename='img/logo-mini.svg') }}">
    <link href="{{ url_for('static', filename='bootstrap5/css/bootstrap.min.css') }}" rel="stylesheet"/>
    <link href="{{ url_for('static', filename='bootstrap5/icons/font/bootstrap-icons.css') }}" rel="stylesheet"/>
    <style>
        html {
            scroll-behavior: smooth;
        }

        body {
            padding-top: 5rem;
            font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
            overflow-x: hidden;
            background: #f8f9fa;
            color: #000;
            transition: background 0.3s ease, color 0.3s ease;
        }

        body.night {
            background: #1e1e2f !important;
            color: #eee;
        }

        .navbar {
            background-color: #041b4f !important;
        }

        body.night .navbar {
            background-color: #12121c !important;
        }

        .nav-link {
            color: #f0f8fa !important;
        }

        .nav-link:hover {
            color: #ffffff !important;
        }

        .alert-info {
            background-color: #f0f8fa;
            border-color: #0170a8;
            color: #041b4f;
        }

        footer {
            margin-top: 4rem;
            padding: 1rem;
            text-align: center;
            color: #888;
        }

        .floating-btn {
            position: fixed;
            right: 20px;
            z-index: 999;
            width: 44px;
            height: 44px;
            background: #0170a8;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            display: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
            padding: 0;
        }

        .floating-btn:hover {
            background-color: #025a81;
        }

        #toggleNight {
            bottom: 140px;
        }

        #settingsToggle {
            bottom: 80px;
        }

        #scrollTopBtn {
            bottom: 20px;
        }

        #settingsPanel {
            position: fixed;
            bottom: 80px;
            right: 70px;
            z-index: 999;
            background: #ffffffdd;
            padding: 10px 15px;
            border-radius: 10px;
            box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
            display: none;
            width: 180px;
            font-size: 14px;
            user-select: none;
        }

        body.night #settingsPanel {
            background: #2b2b3b;
            color: white;
        }

        #particle-canvas {
            position: fixed;
            top: 0;
            left: 0;
            z-index: -1;
        }

        .category-label {
            font-weight: bold;
            font-size: 1.1rem;
            color: #041b4f;
        }

        body.night .category-label {
            color: #ffffff;
        }
    </style>
    {% block styles %}{% endblock %}
</head>
<body>
<canvas id="particle-canvas"></canvas>

<nav class="navbar navbar-expand-md navbar-dark fixed-top">
    <div class="container">
        <a class="navbar-brand" href="{{ url_for('frontend.index') }}">首页</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
                <li class="nav-item"><a class="nav-link" href="{{ url_for('frontend.suggest') }}">提交建议</a></li>
            </ul>
        </div>
    </div>
</nav>

<main class="container">
    {% with messages = get_flashed_messages() %}
        {% if messages %}
            {% for message in messages %}
                <div class="alert alert-info">{{ message }}</div>
            {% endfor %}
        {% endif %}
    {% endwith %}
    {% block content %}{% endblock %}
</main>

<footer>
    <p>Copyright©2023-{{ current_year }} <a href="https://linmwo.top" target="_blank">林墨导航</a> All Rights Reserved.</p>
    <!--  Powered by  Flask:https://flask.github.net.cn/ Bootstrap5:https://v5.bootcss.com/-->
    <p>Powered by <a href="https://flask.palletsprojects.com/" target="_blank">Flask</a>|
        <a href="https://v5.bootcss.com/" target="_blank"><i class="bi bi-bootstrap"></i>Bootstrap5</a></p>
    <!-- 备案 -->
    <img class="img" style="border: 0;" src="" alt=""><a href="https://beian.miit.gov.cn/" target="_blank">{{ beian }}</a>
</footer>

<button id="toggleNight" class="floating-btn" title="夜间模式"><i class="bi bi-moon"></i></button>
<button id="settingsToggle" class="floating-btn" title="设置"><i class="bi bi-gear"></i></button>
<button id="scrollTopBtn" class="floating-btn" title="返回顶部"><i class="bi bi-arrow-up"></i></button>

<div id="settingsPanel" tabindex="0" aria-label="设置面板">
    <div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" id="toggleParticles" checked>
        <label class="form-check-label" for="toggleParticles">粒子背景</label>
    </div>
</div>

<script src="{{ url_for('static', filename='bootstrap5/js/bootstrap.bundle.min.js') }}"></script>
<script>
    const canvas = document.getElementById('particle-canvas');
    const ctx = canvas.getContext('2d');

    function resizeCanvas() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    }

    window.addEventListener('resize', resizeCanvas);
    resizeCanvas();

    let particles = [];
    const particleCount = 80;

    function initParticles() {
        particles = [];
        for (let i = 0; i < particleCount; i++) {
            particles.push({
                x: Math.random() * canvas.width,
                y: Math.random() * canvas.height,
                r: Math.random() * 2 + 1,
                dx: (Math.random() - 0.5),
                dy: (Math.random() - 0.5),
                color: getRandomColor()
            });
        }
    }

    function getRandomColor() {
        const colors = ['#f94144', '#f3722c', '#f8961e', '#f9c74f', '#90be6d', '#43aa8b', '#577590'];
        return colors[Math.floor(Math.random() * colors.length)];
    }

    function drawParticles() {
        if (!document.getElementById('toggleParticles').checked) {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            return;
        }
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        for (let p of particles) {
            ctx.beginPath();
            ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
            ctx.fillStyle = document.body.classList.contains('night') ? 'rgba(255,255,255,0.7)' : p.color;
            ctx.fill();
            p.x += p.dx;
            p.y += p.dy;
            if (p.x < 0 || p.x > canvas.width) p.dx *= -1;
            if (p.y < 0 || p.y > canvas.height) p.dy *= -1;
        }
    }

    initParticles();
    setInterval(drawParticles, 30);

    const settingsToggle = document.getElementById('settingsToggle');
    const settingsPanel = document.getElementById('settingsPanel');
    let hideTimeout;

    settingsToggle.addEventListener('mouseenter', () => {
        clearTimeout(hideTimeout);
        settingsPanel.style.display = 'block';
    });
    settingsPanel.addEventListener('mouseenter', () => clearTimeout(hideTimeout));
    settingsToggle.addEventListener('mouseleave', () => hideTimeout = setTimeout(() => settingsPanel.style.display = 'none', 500));
    settingsPanel.addEventListener('mouseleave', () => hideTimeout = setTimeout(() => settingsPanel.style.display = 'none', 500));

    document.getElementById('toggleNight').addEventListener('click', () => {
        document.body.classList.toggle('night');
        initParticles();  // 重新初始化颜色
    });

    const scrollTopBtn = document.getElementById('scrollTopBtn');
    const floatBtns = ['toggleNight', 'settingsToggle', 'scrollTopBtn'].map(id => document.getElementById(id));
    window.addEventListener('scroll', () => {
        const show = window.scrollY > 100;
        floatBtns.forEach(btn => btn.style.display = show ? 'block' : 'none');
    });

    scrollTopBtn.addEventListener('click', () => {
        window.scrollTo({top: 0, behavior: 'smooth'});
    });
</script>
{% block scripts %}{% endblock %}
</body>
</html>
